<template>
    <app-layout>
        <app-swiper :height="280" :list="banner_list" :autoplay="true" name="pic_url"></app-swiper>
        <view class="bargain-end">
            <app-goods
              v-for="(goods,idx) in list" :key="goods.id"
              :showTag="false"
              :index="idx"
              :theme="getTheme"
              :goods="goods"
              buyBtnText="立即参与"
              :c_border_top="16"
              :c_border_bottom="16"
              :padding="24"
              :click="true"
              @click="handlerGoods"
              :show_time="false"
              price_extra="最低"
            >
                <view slot="name-end">
                    <view class="dir-left-nowrap num box-grow-1 cross-center">
                        <view class="dir-left-nowrap user box-grow-0" v-if="goods && goods.user_list && goods.user_list.length > 0">
                            <block v-for="(v1,k1) in goods.user_list" :key="k1" v-if="k1 < 3">
                                <image class="avatar" :src="v1.avatar" load-lazy></image>
                            </block>
                        </view>
                        <view class="box-grow-1">{{goods.sales}}人正在砍价</view>
                    </view>
                </view>
                <view v-if="goods" slot="price-after" class="bargain-original">
                    ￥{{goods.price}}
                </view>
            </app-goods>
            <app-load-text v-if="load"></app-load-text>
        </view>

        <view>
	        <common-buttom :theme="getTheme" status="index"></common-buttom>
        </view>
    </app-layout>
</template>

<script>
    import appSwiper from "../../../components/page-component/app-swiper/app-swiper.vue";
    import commonButtom from "../common-buttom.vue";
    import appIphoneX from '../../../components/basic-component/app-iphone-x/app-iphone-x.vue';
    import appEmptyBottom from '../../../components/basic-component/app-empty-bottom/app-empty-bottom.vue';
    import appGoods from '../../../components/basic-component/app-goods/app-goods.vue';

    import { mapState, mapGetters } from 'vuex';

    export default {
        name: "index",
        components: {appSwiper, commonButtom, appEmptyBottom, appIphoneX, appGoods},
        computed: {
            ...mapGetters('mallConfig',{
                getVideo: 'getVideo',
                getTheme: 'getTheme',
            }),
            ...mapState({
                appImg: state => state.mallConfig.__wxapp_img.mall,
                appSetting: state => state.mallConfig.mall.setting,
            })
        },
        data() {
            return {
                list: [],
                args: false,
                page: 1,
                load: false,
                banner_list: null,
                title: '砍价',
            }
        },
        // #ifdef MP
        onShareAppMessage() {
            return this.$shareAppMessage({
                title: this.title,
                path: '/plugins/bargain/index/index',
                params: {}
            });
        },
        // #endif
        // #ifdef MP-WEIXIN
        onShareTimeline() {
            // 分享朋友圈beta
            return this.$shareTimeline({
                title: this.title
            });
        },
        // #endif
        onLoad() { this.$commonLoad.onload();
            const self = this;
            self.$request({
                url: self.$api.bargain.banner,
            }).then(info => {
                if (info.code === 0) {
                    self.banner_list = info.data.list;
                }
            })
            // #ifdef MP-WEIXIN
            wx.showShareMenu({
                menus: ['shareAppMessage', 'shareTimeline']
            })
            // #endif
        },

        onShow: function () {
            const self = this;
            self.$showLoading();
            self.$request({
                url: self.$api.bargain.goods_list,
            }).then(info => {
                self.$hideLoading();
                if (info.code === 0) {
                    self.list = info.data.list;
                }
                self.args = false;
                self.page = 1;
            }).catch(e => {
                self.$hideLoading();
            })
        },

        onReachBottom: function () {
            const self = this;
            if (self.args || self.load)
                return;
            self.load = true;
            let page = self.page + 1;

            self.$request({
                url: self.$api.bargain.goods_list,
                data: {
                    page: page,
                }
            }).then(info => {
                if (info.code === 0) {
                    [self.page, self.args, self.list] = [page, info.data.list.length === 0, self.list.concat(info.data.list)];
                }
                self.load = false;
            });
        },
        methods: {
            handlerGoods(data) {
                uni.navigateTo({
                    url: '/plugins/bargain/goods/goods?goods_id=' + data.goods_id,
                });
            }
        }
    }
</script>

<style scoped lang="scss">
    .bargain-end {
        margin: 24rpx;
    }

    .num {
        margin-top: 12rpx;
        height: #{32rpx};
        > view {
            color: #999999;
            font-size: #{24rpx};
            margin-right: #{16rpx};
        }
        .avatar {
            margin-left: -10rpx;
            border: 1px solid #ffffff;
            height: #{32rpx};
            width: #{32rpx};
            border-radius: 50%;
        }

        .user {
            margin-left: 10rpx;
            margin-right: #{16rpx};
        }
    }
    .bargain-original {
        font-size: #{24rpx};
        color: #999999;
        line-height: 1.5;
        text-decoration: line-through;
    }


</style>
